<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let hero = [
            { heroname: '安琪拉', herotype: '法师', gender: '女' },
            { heroname: '庄周', herotype: '辅助', gender: '男' },
            { heroname: '蔡文姬', herotype: '辅助', gender: '女' },
            { heroname: '孙尚香', herotype: '射手', gender: '女' },
            { heroname: '鲁班七号', herotype: '射手', gender: '男' },
            { heroname: '廉颇', herotype: '战士', gender: '男' },
            { heroname: '韩信', herotype: '刺客', gender: '男' },
            { heroname: '高渐离', herotype: '法师', gender: '男' }
        ];
        // 1.定义一个变量来构造table标签结构
        let table = '<table border=1>'
        // 2.利用+号可以拼接字符串的特性添加表头单元格
        table += `
        <tr>
            <th>序号</th>
            <th>英雄姓名</th>
            <th>英雄职业</th>
            <th>性别</th>
        </tr>
        `
        /* 3.利用数组遍历对里面的对象输出到相应的位置上,主要方法为hero[下标]访问到对应对象,然后用对象访问为对象.属性名进行输出 */
        for (let i = 0; i < hero.length; i++) {
            table += `
            <tr>
                <td>${i + 1}</td>
                <td>${hero[i].heroname}</td>
                <td>${hero[i].herotype}</td>
                <td>${hero[i].gender}</td>
            </tr>
            `
        }
        // 4.关闭table,并输出到body
        table += '</table>';
        document.write(table)

        /* 总结: 通过该案例可以解决一些因数据修改而结构内容不修改的问题,数组里面嵌套对象可以解决数组之前可阅读性不高的问题,对象里的属性名跟对应的属性值可以让数据更加直观,而利用数组的下标与长度的遍历比对象遍历灵活的特点,可以更方便把对应内容输出到对应地方
         */
    </script>
</body>

</html>